<template>
  <el-menu
    style="width: 200px"
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    unique-opened
    route
    @select="selectCallback"
    :collapse="isCollapse"
  >
    <el-menu-item index="/index">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>首页</span>
      </template>
    </el-menu-item>
    <template v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="menu.menuType === 'C'" :index="menu.path">
        <template #title>{{ menu.menuName }}</template>
      </el-menu-item>
      <Menu v-if="menu.menuType === 'M'" :menu="menu" />
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Location } from "@element-plus/icons-vue";
import { menuTree, MenuVO } from "@/api/menu";
import { useRouter } from "vue-router";

const isCollapse = ref(false);
const router = useRouter();
const menus = ref<Array<MenuVO>>();
const activeMenu = ref("/index");

const initActiveMenu = () => {
  activeMenu.value = router.currentRoute.value.fullPath;
};

initActiveMenu();

const selectCallback = index => {
  router.push(index);
};

const initMenu = async () => {
  const res = await menuTree({});
  if (res.success) {
    menus.value = res.data;
  }
};
initMenu();
</script>
